<template>
  <view class="chat-item" :class="active?'active':''">
    <!--rich-text中的表情包会屏蔽事件，所以这里用一个遮罩层捕获点击事件 -->
    <view class="mask" @tap="showChatBox()"></view>
    <view class="left">
      <!--此处增加在线状态显示-->
      <head-image :url="chat.headImage" :online="getFriend(chat.targetId)?.online" :name="chat.showName" :size="90"></head-image>
    </view>
    <view class="chat-right">

      <view class="chat-name">

        <view class="chat-tag" v-if="chat.type=='GROUP'">
          <uni-tag disabled text="群" size="mini" type="primary"></uni-tag>
        </view>
        <view class="chat-tag" v-if="chat.type=='SYSTEM'">
          <uni-tag disabled text="官方" size="mini" type="primary"></uni-tag>
        </view>

        <view class="chat-name-text">
          {{ chat.showName }}
        </view>
        <view class="chat-time">{{ $date.toTimeText(chat.lastSendTime, true) }}</view>
      </view>
      <view class="chat-content">
        <view class="chat-at-text">{{ atText }}</view>
        <view class="chat-send-name" v-if="isShowSendName">{{ chat.sendNickName + ' :&nbsp;' }}</view>
        <rich-text class="chat-content-text" :nodes="$emo.transform(chat.lastContent)"></rich-text>
        <uni-badge v-if="chat.unreadCount>0" size="small" :max-num="99" :text="chat.unreadCount"/>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "chatItem",
  data() {
    return {}
  },
  props: {
    chat: {
      type: Object
    },
    index: {
      type: Number
    },
    active: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    showChatBox() {
      if (this.chat.type == 'SYSTEM') {
        uni.navigateTo({
          url: "/pages/chat/chat-system?chatIdx=" + this.index
        })
      } else {
        uni.navigateTo({
          url: "/pages/chat/chat-box?chatIdx=" + this.index
        })
      }
    },

    getFriend(id){
      return this.friends.find(friend => friend.id === id);
    }
  },
  computed: {
    friends() {
      return this.friendStore.friends;
    },

    isShowSendName() {
      if (!this.chat.sendNickName) {
        return false;
      }
      let size = this.chat.messages.length;
      if (size == 0) {
        return false;
      }
      // 只有群聊的普通消息需要显示名称
      let lastMsg = this.chat.messages[size - 1];
      return this.$msgType.isNormal(lastMsg.type)
    },
    atText() {
      if (this.chat.atMe) {
        return "[有人@我]"
      } else if (this.chat.atAll) {
        return "[@全体成员]"
      }
      return "";
    }
  }
}
</script>

<style scoped lang="scss">
.chat-item {
  height: 130rpx;
  display: flex;
  margin-bottom: 20rpx;
  border-radius: 24rpx;
  position: relative;
  padding: 20rpx 20rpx;
  align-items: center;
  background-color: white;
  white-space: nowrap;

  &:hover {
    background-color: #f5f6ff;
  }

  &.active {
    background-color: #f5f6ff;
  }


  .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 99;
  }

  .left {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100rpx;
    height: 100rpx;
  }

  .chat-right {
	  height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
	justify-content: space-between;
    padding-left: 20rpx;
    text-align: left;
    overflow: hidden;

    .chat-name {
      display: flex;
      line-height: 44rpx;
      height: 44rpx;

      .chat-tag {
        margin-top: 15rpx;
        display: flex;
        align-items: center;
        margin-right: 5rpx;
      }

      .chat-name-text {
        margin-top: 15rpx;
        flex: 1;
        font-size: 30rpx;
        letter-spacing: 1rpx; /* 字母间距 */
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
		font-size: 32rpx;
        display: flex;
        align-items: center;
		color: rgba(42, 34, 47, 1);

        .uni-tag {
          text-align: center;
          margin-left: 5rpx;
          border: 0;
          height: 30rpx;
          line-height: 30rpx;
          font-size: 20rpx;
          padding: 1px 5px;
          background-color: #de1c1c;
          opacity: 0.8;
        }
      }

      .chat-time {
        color: rgba(195, 176, 195, 1);
        font-size: 24rpx;
        letter-spacing: 2rpx; /* 字母间距 */
        text-align: right;
        font-weight: normal;
        white-space: nowrap;
        overflow: hidden;
      }
    }

    .chat-content {
      display: flex;
      align-items: center;
      line-height: 60rpx;
      height: 60rpx;

      .chat-at-text {
        color: #c70b0b;
        font-size: 22rpx;
      }

      .chat-send-name {
        color: #999;
        font-size: 24rpx;
      }

      .chat-content-text {
        width: 90%;
        flex: 1;
        font-size: 24rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #999;
        font-weight: normal;
      }

    }
  }
}
</style>